<template>
  <div class="flex">
    <canvas ref="canvas" width="450" height="450" @click="handleClick"></canvas>
  </div>
  <div class="btn-con">
      <h2 v-show="winner!==''">{{ winner==1?'黑方胜':'白方胜' }}</h2>
      <button @click="$emit('toChange')">切换模式</button>
      <button @click="$emit('reStart')">重新开始</button>
      <button @click="handleUndo">悔棋</button>
      <button @click="handleRedo">撤销悔棋</button>
    </div>
</template>
  
<script>
export default {
  mounted() {
    const canvas = this.$refs.canvas
    const ctx = canvas.getContext('2d')
    this.drawBoard(ctx)
  },
  data() {
    return {
      pieces: [],
      undoStack: [],
      redoStack: [],
      currentPlayer: 1,
      winner: ''
    }
  },
  methods: {
    handleClick(event) {
      if (this.winner) {
        return false
      }
      const canvas = this.$refs.canvas
      const rect = canvas.getBoundingClientRect()
      const x = event.clientX - rect.left
      const y = event.clientY - rect.top
      const row = Math.floor(y / 30)
      const col = Math.floor(x / 30)
      if (this.getPiece(row, col) !== null) {//判断是否存在棋子
        return false
      }
      const piece = { row, col, color: this.currentPlayer }
      this.pieces.push(piece)
      this.undoStack.push(piece)
      this.redoStack = []
      this.drawPiece(piece)
      this.checkWin(this.currentPlayer)//检查输赢
      this.currentPlayer = this.currentPlayer === 1 ? 2 : 1
    },
    handleUndo() {
      if (this.pieces.length > 0) {
        const piece = this.pieces.pop()
        this.undoStack.pop()
        this.redoStack.push(piece)
        const canvas = this.$refs.canvas
        const ctx = canvas.getContext('2d')
        this.drawBoard(ctx)
        this.pieces.forEach(piece => {
          this.drawPiece(piece)
        })
      }
    },
    handleRedo() {
      if (this.redoStack.length > 0) {
        const piece = this.redoStack.pop()
        this.pieces.push(piece)
        this.undoStack.push(piece)
        const canvas = this.$refs.canvas
        const ctx = canvas.getContext('2d')
        this.drawBoard(ctx)
        this.pieces.forEach(piece => {
          this.drawPiece(piece)
        })
      }
    },
    drawBoard(ctx) {
      ctx.fillStyle = '#f5c17d'
      ctx.fillRect(0, 0, 450, 450)
      ctx.strokeStyle = '#000'
      ctx.beginPath()
      for (let i = 0; i < 15; i++) {//横竖划线
        ctx.moveTo(15 + i * 30, 15)
        ctx.lineTo(15 + i * 30, 435)
        ctx.stroke()
        ctx.moveTo(15, 15 + i * 30)
        ctx.lineTo(435, 15 + i * 30)
        ctx.stroke()
      }
    },
    drawPiece(piece) {
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')
      ctx.beginPath()
      ctx.arc(15 + piece.col * 30, 15 + piece.row * 30, 13, 0, 2 * Math.PI)
      ctx.fillStyle = piece.color == 1 ? '#000' : '#fff'
      ctx.fill()
    },
    checkWin(color) {
      const directions = [
        [0, 1],
        [1, 0],
        [1, 1],
        [1, -1]
      ]
      for (let i = 0; i < this.pieces.length; i++) {
        const piece = this.pieces[i]
        if (piece.color !== color) {
          continue
        }
        for (let j = 0; j < directions.length; j++) {
          const direction = directions[j]
          let count = 1
          let row = piece.row
          let col = piece.col
          while (count < 5) {
            row += direction[0]
            col += direction[1]
            const nextPiece = this.getPiece(row, col)
            if (!nextPiece || nextPiece.color !== color) {
              break
            }
            count++
          }
          if (count >= 5) {
            this.winner = this.currentPlayer
            return true
          }
        }
      }
      return false
    },
    getPiece(row, col) {
      for (let i = 0; i < this.pieces.length; i++) {
        const piece = this.pieces[i]
        if (piece.row === row && piece.col === col) {
          return piece
        }
      }
      return null
    }

  }
}
</script>
<style scoped>
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}


</style>
  